<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胃肠外科 - 预约</title>
</head>
<body>
<div class="content">
    <div class="depInfo">
        <div id="dep">
            <h2 style="text-align: center; color: #333;">胃肠外科</h2>
            <div>
                    <span style="line-height: 20px; font-size: 18px; color: #555;">
                        我们的胃肠外科专家团队由一群经验丰富、高度资深的胃肠外科医生组成。
                        他们具有卓越的专业背景和卓越的技术水平，致力于为患者提供高质量的胃肠外科护理。
                    </span>
            </div>
        </div>
    </div>
    <div class="carousel-container">
        <div class="arrow arrow-left" onclick="showPreviousSlide()">❮</div>
        <div class="carousel-wrapper" id="carouselWrapper">
            <div class="carousel-card">
                <div class="docInfo">
                    <div class="docImg"></div>
                    <div class="specific">
                        <div>
                            <span style="font-weight: bold; color: #333;">医生姓名： DrJohn</span>
                        </div>
                        <div>
                            <span style="color: #555;">专业领域： 胃肠外科</span>
                        </div>
                        <div class="back">
                            <span style="font-weight: bold; color: #333;">教育背景</span>
                            <ul>
                                <li>医学学士学位 - 北京医科大学</li>
                                <li>内科住院医师培训 - 北京市人民医院</li>
                                <li>胃肠外科专科培训 - 北京胃肠研究所</li>
                            </ul>
                        </div>
                        <div class="expe">
                            <span style="font-weight: bold; color: #333;">临床经验</span>
                            <ul>
                                <li>胃肠外科主治医生 - 北京市胃肠医院（5年）</li>
                                <li>胃肠外科资深专家 - 北京胃肠中心（目前职位）</li>
                            </ul>
                        </div>
                        <div class="dropdowndiv">
                            <div>
                                <label for="dropdown" style="color: #333;">预约时间</label>
                                <select id="dropdown">
                                    <option value="option1">14:00</option>
                                    <option value="option2">17:00</option>
                                    <option value="option3">8:00</option>
                                    <!-- 添加更多选项，根据需要 -->
                                </select>
                            </div>
                            <div style="margin-top: 10px;">
                                <button onclick="appointment()" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">确认预约</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="carousel-card">
                <div class="docInfo">
                    <div class="docImg"></div>
                    <div class="specific">
                        <div>
                            <span style="font-weight: bold; color: #333;">医生姓名： DrSmith</span>
                        </div>
                        <div>
                            <span style="color: #555;">专业领域： 胃肠外科</span>
                        </div>
                        <div class="back">
                            <span style="font-weight: bold; color: #333;">教育背景</span>
                            <ul>
                                <li>医学学士学位 - 北京医科大学</li>
                                <li>内科住院医师培训 - 北京市人民医院</li>
                                <li>胃肠外科专科培训 - 北京胃肠研究所</li>
                            </ul>
                        </div>
                        <div class="expe">
                            <span style="font-weight: bold; color: #333;">临床经验</span>
                            <ul>
                                <li>胃肠外科主治医生 - 北京市胃肠医院（5年）</li>
                                <li>胃肠外科资深专家 - 北京胃肠中心（目前职位）</li>
                            </ul>
                        </div>
                        <div class="dropdowndiv">
                            <div>
                                <label for="dropdown2" style="color: #333;">预约时间</label>
                                <select id="dropdown2">
                                    <option value="option1">14:00</option>
                                    <option value="option2">17:00</option>
                                    <option value="option3">8:00</option>
                                    <!-- 添加更多选项，根据需要 -->
                                </select>
                            </div>
                            <div style="margin-top: 10px;">
                                <button onclick="appointment2()" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">确认预约</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加更多卡片，根据需要 -->
        </div>
        <div class="arrow arrow-right" onclick="showNextSlide()">❯</div>
    </div>
</div>

<script>
    const carouselWrapper = document.getElementById('carouselWrapper');
    let currentIndex = 0;

    function showNextSlide() {
        currentIndex = (currentIndex + 1) % carouselWrapper.children.length;
        updateCarousel();
    }

    function showPreviousSlide() {
        currentIndex = (currentIndex - 1 + carouselWrapper.children.length) % carouselWrapper.children.length;
        updateCarousel();
    }

    function updateCarousel() {
        const translateValue = -currentIndex * 100 + '%';
        carouselWrapper.style.transform = 'translateX(' + translateValue + ')';

        // 添加 transitionend 事件监听
        carouselWrapper.addEventListener('transitionend', handleTransitionEnd);
    }

    function handleTransitionEnd() {
        // 移除事件监听
        carouselWrapper.removeEventListener('transitionend', handleTransitionEnd);
    }

    function appointment(){
        fetch('http://localhost:8888/appointment/insert',{
            method: 'POST',
            headers: {
                'Token': window.localStorage.getItem('token'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                patientId: window.localStorage.getItem('patientId'),
                doctorId: 1,
            }),
        }).then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            alert('成功预约！！！！！！！！！');
            return response.json();
        }).then(data => {
            window.localStorage.setItem('appointmentId',data)
        })
    }

    function appointment2(){
        fetch('http://localhost:8888/appointment/insert',{
            method: 'POST',
            headers: {
                'Token': window.localStorage.getItem('token'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                patientId: window.localStorage.getItem('patientId'),
                doctorId: 2,
            }),
        }).then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            alert('成功预约！！！！！！！！！');
            return response.json();
        }).then(data => {
            window.localStorage.setItem('appointmentId',data)
        })
    }
</script>

<style>
    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #e8fffb;
    }

    .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .depInfo {
        position: relative;
        width: 100%;
        height: 300px;
        background-image: url("./images/科室.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #b6b6b6;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #dep {
        width: 400px;
        height: 80%;
        position: absolute;
        top: 50px;
        left: 36%;
        z-index: 1;
    }

    .back, .expe {
        margin-top: 10px;
        color: #333;
    }

    .carousel-container {
        width: 80%;
        margin: 50px auto;
        overflow: hidden;
        position: relative;
    }

    .carousel-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .carousel-card {
        flex: 0 0 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        margin-right: 20px;
    }

    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 50%;
        border: 1px solid #ddd;
        z-index: 1;
    }

    .arrow-left {
        left: 10px;
    }

    .arrow-right {
        right: 10px;
    }

    .carousel-card {
        flex: 0 0 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        margin-right: 20px;
    }
    .docInfo {
        width: 100%;
        height: 300px;
        background-color: #99b6b7;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
    }

    .docImg {
        margin: 20px 0 50px -10px;
        background-image: url("./images/doc1.png"); /* 修改为实际的医生图片 URL */
        width: 180px;
        height: 250px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
    }

    .specific {
        margin: 20px 0 50px 100px;
        width: 600px;
        height: 250px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .dropdowndiv {
        background-color: #beedef;
        position: relative;
        right: -440px;
        top: -230px;
        height: 200px;
        width: 250px;
        padding: 20px;
        border-radius: 8px;
    }
</style>
</body>
</html>
